<template>
    <div class="page-wrap">
        <div class="page-cont">
            <div class="table-header-wrap">
                <flexbox justify="space-between" align="center" class="table-header-cont">
                    <a-radio-group v-model:value="selectedValue" button-style="solid" @change="radioChange">
                        <a-radio-button :value="item" v-for="item of radioOptions" :key="item"> {{ item }} </a-radio-button>
                    </a-radio-group>
                </flexbox>
            </div>
            <div class="margin-t-16">
                <a-table rowId="id" :columns="columns" :data-source="list" :pagination="false">
                    <template #name="{ record }">
                        <a @click="showDetail(record)">{{ record.name }}</a>
                    </template>
                    <template #type="{ record }">
                        <a-tag color="success">{{ record.type }}</a-tag>
                    </template>
                    <template #stage="{ record }">
                        <a-tag color="blue">{{ record.stage }}</a-tag>
                    </template>
                </a-table>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import { useRouter, useRoute } from 'vue-router';
import api from '@/api';
import { defineComponent, reactive, toRefs } from 'vue';
interface CardState {
    selectedValue: string;
    radioOptions: any[];
    list: any[];
}
export default defineComponent({
    setup() {
        const router = useRouter();
        const route = useRoute();
        const columns = [
            { title: '待办事项', dataIndex: 'name', ellipsis: true, slots: { customRender: 'name' } },
            { title: '流程类型', dataIndex: 'type', slots: { customRender: 'type' } },
            { title: '当前节点', dataIndex: 'stage', slots: { customRender: 'stage' } },
            { title: '发起人', dataIndex: 'initiator' }
        ];
        const state = reactive<CardState>({
            selectedValue: '待处理',
            radioOptions: ['待处理', '已处理'],
            list: []
        });
        const radioChange = async (val) => {
            val = typeof val === 'string' ? val : val.target.value;
            state.selectedValue = val;
            const request = val === '待处理' ? api.workbenchModel.findPendingRequire : api.workbenchModel.findProcessedRequire;
            const { success, moule } = await request();
            if (success) {
                state.list = [...moule];
            }
        };
        const showDetail = ({ id, type }) => {
            let path = '';
            switch (type) {
                case '受理':
                    path = '/taskRequire/taskDetail';
                    break;
                case '研发':
                    path = '/version/versionDetail';
                    break;
                case '变更':
                    path = '/requireChange/changeDetail';
                    break;
                case '能效汇报':
                    path = '/energyManage/analysisReport/detail';
                    break;
                case '版本能效':
                    path = '/energyManage/versionReportHistory/detail';
                    break;
                case '路标规划':
                    path = '/lubiao/my/detail';
                    break;
                case '路标管理':
                    path = '/registeredProject/detail';
                    break;
                default:
                    '';
            }
            router.push({
                path,
                query: {
                    id
                }
            });
        };
        const showMore = () => {
            router.push({
                path: '/taskRequire/myRequire'
            });
        };
        radioChange(route.query.type === '0' ? '待处理' : '已处理');
        return {
            columns,
            ...toRefs(state),
            showDetail,
            showMore,
            radioChange
        };
    }
});
</script>
<style scoped lang="less">
.page-wrap {
    min-height: 100%;
    padding: 24px;
    margin: 24px;
    background: #fff;
    .page-cont {
        margin: 24px auto;
    }
    .list-item {
        padding: 8px 22px 8px 35px;
        background-color: #fff;
        width: 100%;
        cursor: pointer;
        border-bottom: 1px solid #edeff3;
        &:hover {
            background: #fafafa;
            .down-icon {
                display: block;
            }
        }
        // 下载按钮
        .down-icon {
            display: none;
        }
    }
}
</style>
